<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>匿名留言墙</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/isInViewport.js"></script>
    <script src="js/triangle.js" defer></script>
    <style>
        body{
            margin-top: 1em;
            margin-bottom: 1em;
        }
        .jumbotron{
            position: relative;
            overflow: hidden;
        }
        .admin-btn{
            position: absolute;
            top: 0;
            right: 0;
            height: 30px;
            width: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #455A64;
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
            cursor: pointer;
        }
        #load-spinner{
            text-align: center;
            margin: 1em 0;
        }
        #load-spinner>span{
            animation: rotate 1s linear infinite;
        }
        .comment-like,
        .comment-del{
            margin-right: 1em;
        }
        .comment-like>.oi-thumb-up{
            cursor: pointer;
        }
        .comment-like.liked>.oi-thumb-up{
            color: #E74C3C;
            cursor: default;
        }
        .comment-content{
            white-space: pre;
        }
        @keyframes rotate {
            from{
                transform: rotateZ(0);
            }
            to{
                transform: rotateZ(360deg);
            }
        }
    </style>
    <script src="js/comment.js"></script>
</head>
<body class="container">
<div class="jumbotron bg-triangle" data-color="#303030">
    <div class="admin-btn" data-toggle="modal" data-target=".admin-modal" th:if="${#request.session.getAttribute('is-admin') != true}" title="管理员登录">
        <span class="oi oi-cog"></span>
    </div >
    <div class="admin-btn" data-toggle="modal" data-target=".logoff-modal" th:unless="${#request.session.getAttribute('is-admin') != true}" th:else title="退出登录">
        <span class="oi oi-account-logout"></span>
    </div >
    <div class="modal fade admin-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <form class="modal-content" method="post" action="javascript:login()">
                <div class="modal-header">
                    <h5 class="modal-title">管理员登录</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="admin-username" class="col-form-label">用户名</label>
                        <input class="form-control" id="admin-username" type="text" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="admin-password" class="col-form-label">密码</label>
                        <input class="form-control" id="admin-password" type="password" name="password" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">登录</button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade logoff-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <form class="modal-content" method="post" action="javascript:logoff()">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">警告</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    确认要退出登录？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">退出登录</button>
                </div>
            </form>
        </div>
    </div>

    <h1 class="display-4">匿名留言墙</h1>
    <p class="lead" th:text="${#request.session.getAttribute('is-admin') == true ? '你已处于管理员模式' : '你可以在此畅所欲言'}">~</p>
    <hr class="my-4">
    <form id="comment-form" action="javascript:submitComment();">
        <div class="form-group">
            <label for="nick-name">* 昵称</label>
            <input type="text" class="form-control" name="nick-name" id="nick-name" required>
            <small id="nick-name-tip" class="form-text text-muted">让你突出在众人之中</small>
        </div>
        <div class="form-group">
            <label for="comment-content">* 留言</label>
            <textarea class="form-control" name="comment-content" id="comment-content" rows="5" required></textarea>
        </div>
        <button id="submit-btn" type="submit" class="btn btn-primary"><span class="oi oi-comment-square"></span> 发射！</button>
    </form>
</div>
<ul id="comment-list" class="list-group">
    <!--/*@thymesVar id="commentList" type="java.util.List<site.zsxeee.work.bootstrap.backend.domain.Comment>"*/-->
    <!--/*@thymesVar id="likedList" type="Array<java.lang.Integer>"*/-->
    <li class="list-group-item list-group-item-action flex-column align-items-start" th:each="it:${commentList}">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1" th:utext="${it.nickName}"></h5>
            <div>
                <small class="comment-del" th:if="${#request.session.getAttribute('is-admin') == true
                 || (#request.session.getAttribute('comments_id') != null && #request.session.getAttribute('comments_id').contains(it.id))}"><a href="javascript:void(0)" onclick="del(this)">删除</a></small>
                <small class="comment-like" th:classappend="${likedList.contains(it.id)? 'liked': null}"><span class="oi oi-thumb-up" th:data-id="${it.id}"></span>[[' '+${it.likeNum}]]</small>
                <small class="comment-id" th:text="'#'+${it.id}"></small>
            </div>
        </div>
        <small th:text="${#strings.replace(it.dateTime, '.0', '')}"></small>
        <p class="mb-1 comment-content" th:utext="${#strings.replace(it.comment, T(System).getProperty('line.separator'), '<br/>')}"></p>
    </li>
</ul>
<div id="load-spinner" th:if="${commentList.size()>0}" th:data-current-page="${currentPage}">
    <span class="oi oi-reload"></span>
</div>
</body>
</html>